<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
/** @var $this \Magento\Theme\Block\Adminhtml\Wysiwyg\Files\Content\Uploader */
?>

<div id="<?php echo $this->getHtmlId() ?>" class="uploader">
    <span class="fileinput-button form-buttons">
        <span><?php echo __('Browse Files') ?></span>
        <input id="fileupload" type="file" name="<?php echo $this->getConfig()->getFileField() ?>"
            data-url="<?php echo $this->getConfig()->getUrl() ?>" multiple>
    </span>
    <div class="clear"></div>
    <div class="no-display" id="<?php echo $this->getHtmlId() ?>-template">
        <div id="{{id}}" class="file-row">
            <span class="file-info">{{name}} ({{size}})</span>
            <div class="progressbar-container">
                <div class="progressbar upload-progress" style="width: 0%;"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
require(['jquery', "jquery/file-uploader"], function($){

//<![CDATA[
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            formData: {
                isAjax: 'true',
                form_key: FORM_KEY
            },
            sequentialUploads: true,
            maxFileSize: <?php echo $this->getFileSizeService()->getMaxFileSize()?>,
            add: function(e, data) {
                $.each(data.files, function (index, file) {
                    data.fileId =  Math.random().toString(36).substr(2,9);
                    var progressTmpl = $('#<?php echo $this->getHtmlId(); ?>-template').children(':first').clone();
                    progressTmpl.attr('id', data.fileId);
                    var fileInfoHtml = progressTmpl.html().replace('{{size}}', byteConvert(file.size))
                        .replace('{{name}}', file.name);
                    progressTmpl.html(fileInfoHtml) ;

                    progressTmpl.appendTo('#<?php echo $this->getHtmlId() ?>');

                });
                $(this).fileupload('process', data).done(function () {
                    data.submit();
                });
            },
            done: function(e, data) {
                var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
                $(progressSelector).css('width','100%');
                if (data.result && !data.result.hasOwnProperty('errorcode')) {
                    $(progressSelector).removeClass('upload-progress').addClass('upload-success');
                    MediabrowserInstance.handleUploadComplete();
                } else {
                    $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
                }
            },
            progress: function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
                $(progressSelector).css('width', progress + '%');
            },
            fail: function(e, data) {
                var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
                $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
            }
        });
    });
//]]>

});
</script>
